import React, { useState, useEffect, useCallback } from 'react'
import { getSysUserSelected } from '../../../../../Api/listUrl'
import {putAccRuleAddRule} from '../../../financialApi'
import { Modal, Form, Input, InputNumber, message, Select } from 'antd'

const { Option } = Select;

/**
 * @description: 财务添加规则 弹窗
 * @author： xiaoxujs
 * @updata： xiaoxujs（2021-07-26） 创建
 */

const AddFinanceRule = ({ setAddFinanceRuleShow, addFinanceRuleShow, listFun }) => {
    const [form] = Form.useForm()
    const { validateFields, resetFields } = form
    const [userList, setUserList] = useState([])
    const userFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysUserSelected()
                if (code === '20000') {
                    setUserList(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        userFun()
    }, [userFun])
    const handleOk = () => {
        validateFields().then(values => {
            ;(async () => {
                const {code, msg} = await putAccRuleAddRule(values)
                if(code === '20000') {
                    message.success('审批规则新增成功')
                    listFun()
                    resetFields()
                    setAddFinanceRuleShow(false);
                }else{
                    message.error(msg)
                }

            })()
        })
        // 
    };

    const handleCancel = () => {
        setAddFinanceRuleShow(false);
    };
    return <Modal title="添加财务审批规则" visible={addFinanceRuleShow} onOk={handleOk} onCancel={handleCancel}>
        <Form
            name="basic"
            labelCol={{ span: 10 }}
            wrapperCol={{ span: 14 }}
            form={form}
        >
            <Form.Item
                label="最终审批人执行条件（元）"
                name="condition"
                rules={[{ required: true, message: '请输入最终审批人执行条件！' }]}
            >
                <InputNumber />
            </Form.Item>
            <Form.Item
                label="初级审批人"
                name="elementary"
                rules={[{ required: true, message: '请选择初级审批人！' }]}
            >
                <Select style={{ width: 120 }}>
                    {
                        userList.map(item => <Option value={item.id} key={item.id} >{item.name}</Option>)
                    }

                </Select>
            </Form.Item>
            <Form.Item
                label="规则名称"
                name="ruleName"
                rules={[{ required: true, message: '请输入规则名称！' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="最终审批人"
                name="ultimately"
                rules={[{ required: true, message: '请选择最终审批人' }]}
            >
                <Select style={{ width: 120 }}>
                    {
                        userList.map(item => <Option value={item.id} key={item.id} >{item.name}</Option>)
                    }

                </Select>
            </Form.Item>
        </Form>
    </Modal>
}

export default AddFinanceRule